<template>
  <div class="monitoring">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>系统监控</h1>
      <p>实时监控系统运行状态</p>
    </div>

    <!-- 监控概览 -->
    <div class="monitoring-overview">
      <el-row :gutter="20" class="mb-4">
        <el-col :span="6" v-for="metric in systemMetrics" :key="metric.title">
          <el-card class="metric-card" :class="getMetricStatus(metric.status)">
            <div class="metric-content">
              <div class="metric-icon">
                <el-icon :size="32">
                  <component :is="metric.icon"/>
                </el-icon>
              </div>
              <div class="metric-info">
                <div class="metric-value">{{ metric.value }}</div>
                <div class="metric-title">{{ metric.title }}</div>
                <div class="metric-status">{{ metric.statusText }}</div>
              </div>
            </div>
            <div class="metric-progress">
              <el-progress :percentage="metric.percentage" :status="metric.status" :show-text="false"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 实时图表 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>CPU 使用率</span>
              <el-tag :type="cpuStatus">{{ cpuUsage }}%</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon :size="48" class="chart-icon">
                <TrendCharts />
              </el-icon>
              <p>CPU使用率实时图表</p>
              <div class="chart-legend">
                <div class="legend-item">
                  <span class="legend-color" style="background: #409eff;"></span>
                  <span>CPU 核心1</span>
                </div>
                <div class="legend-item">
                  <span class="legend-color" style="background: #67c23a;"></span>
                  <span>CPU 核心2</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>内存使用情况</span>
              <el-tag :type="memoryStatus">{{ memoryUsage }}%</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon :size="48" class="chart-icon">
                <PieChart />
              </el-icon>
              <p>内存使用分布图</p>
              <div class="memory-info">
                <div>已用: 8.2 GB</div>
                <div>可用: 7.8 GB</div>
                <div>总计: 16 GB</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务状态列表 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>服务状态</span>
          <el-button type="primary" size="small" @click="refreshServices">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>
      <el-table :data="services" class="service-table">
        <el-table-column prop="name" label="服务名称" width="200">
          <template #default="{ row }">
            <div class="service-name">
              <el-icon class="service-icon">
                <component :is="row.icon"/>
              </el-icon>
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getServiceStatusType(row.status)" size="small">
              {{ row.status === 'running' ? '运行中' : row.status === 'stopped' ? '已停止' : '异常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="uptime" label="运行时间" width="150"/>
        <el-table-column prop="memory" label="内存占用" width="120"/>
        <el-table-column prop="cpu" label="CPU占用" width="120"/>
        <el-table-column prop="lastChecked" label="最后检查" width="180"/>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button-group size="small">
              <el-button v-if="row.status === 'running'" type="warning" @click="stopService(row)">
                <el-icon><VideoPause /></el-icon>
                停止
              </el-button>
              <el-button v-else type="success" @click="startService(row)">
                <el-icon><VideoPlay /></el-icon>
                启动
              </el-button>
              <el-button type="primary" @click="restartService(row)">
                <el-icon><Refresh /></el-icon>
                重启
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Odometer,
  Monitor,
  TrendCharts,
  PieChart,
  Refresh,
  VideoPause,
  VideoPlay,
  Server,
  DataBase,
  Link,
  Files
} from '@element-plus/icons-vue'

// 系统指标
const systemMetrics = ref([
  {
    title: 'CPU 使用率',
    value: '68%',
    icon: 'Monitor',
    status: 'warning',
    statusText: '正常',
    percentage: 68
  },
  {
    title: '内存使用',
    value: '52%',
    icon: 'TrendCharts',
    status: 'success',
    statusText: '健康',
    percentage: 52
  },
  {
    title: '磁盘空间',
    value: '35%',
    icon: 'Files',
    status: 'success',
    statusText: '充足',
    percentage: 35
  },
  {
    title: '网络流量',
    value: '1.2GB',
    icon: 'Link',
    status: 'success',
    statusText: '正常',
    percentage: 75
  }
])

// CPU和内存数据
const cpuUsage = ref(68)
const memoryUsage = ref(52)

const cpuStatus = computed(() => {
  if (cpuUsage.value > 80) return 'danger'
  if (cpuUsage.value > 60) return 'warning'
  return 'success'
})

const memoryStatus = computed(() => {
  if (memoryUsage.value > 80) return 'danger'
  if (memoryUsage.value > 60) return 'warning'
  return 'success'
})

// 服务列表
const services = ref([
  {
    name: 'Web 服务器',
    icon: 'Server',
    status: 'running',
    uptime: '5天 12小时',
    memory: '245 MB',
    cpu: '12%',
    lastChecked: '2024-01-15 14:30:15'
  },
  {
    name: '数据库服务',
    icon: 'DataBase',
    status: 'running',
    uptime: '10天 3小时',
    memory: '1.2 GB',
    cpu: '25%',
    lastChecked: '2024-01-15 14:30:12'
  },
  {
    name: 'Redis 缓存',
    icon: 'Monitor',
    status: 'running',
    uptime: '8天 15小时',
    memory: '64 MB',
    cpu: '2%',
    lastChecked: '2024-01-15 14:30:10'
  },
  {
    name: '消息队列',
    icon: 'Link',
    status: 'stopped',
    uptime: '-',
    memory: '-',
    cpu: '-',
    lastChecked: '2024-01-15 14:25:30'
  }
])

// 定时器
let timer = null

// 方法
const getMetricStatus = (status) => {
  return {
    'metric-success': status === 'success',
    'metric-warning': status === 'warning',
    'metric-danger': status === 'danger'
  }
}

const getServiceStatusType = (status) => {
  switch (status) {
    case 'running': return 'success'
    case 'stopped': return 'info'
    case 'error': return 'danger'
    default: return 'info'
  }
}

const refreshServices = () => {
  ElMessage.success('服务状态已刷新')
  // 模拟数据更新
  services.value.forEach(service => {
    service.lastChecked = new Date().toLocaleString('zh-CN')
  })
}

const startService = (service) => {
  ElMessage.success(`正在启动 ${service.name}...`)
  setTimeout(() => {
    service.status = 'running'
    service.uptime = '刚刚启动'
    ElMessage.success(`${service.name} 启动成功`)
  }, 1000)
}

const stopService = (service) => {
  ElMessage.warning(`正在停止 ${service.name}...`)
  setTimeout(() => {
    service.status = 'stopped'
    service.uptime = '-'
    service.memory = '-'
    service.cpu = '-'
    ElMessage.success(`${service.name} 已停止`)
  }, 1000)
}

const restartService = (service) => {
  ElMessage.info(`正在重启 ${service.name}...`)
  setTimeout(() => {
    service.status = 'running'
    service.uptime = '刚刚重启'
    ElMessage.success(`${service.name} 重启成功`)
  }, 1500)
}

// 模拟实时数据更新
const updateMetrics = () => {
  // 模拟CPU使用率变化
  cpuUsage.value = Math.floor(Math.random() * 30) + 50
  memoryUsage.value = Math.floor(Math.random() * 20) + 45
  
  // 更新系统指标
  systemMetrics.value[0].value = `${cpuUsage.value}%`
  systemMetrics.value[0].percentage = cpuUsage.value
  systemMetrics.value[1].value = `${memoryUsage.value}%`
  systemMetrics.value[1].percentage = memoryUsage.value
}

onMounted(() => {
  // 每5秒更新一次数据
  timer = setInterval(updateMetrics, 5000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped lang="scss">
.monitoring {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 120px);

  .page-header {
    margin-bottom: 24px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #7f8c8d;
      font-size: 14px;
      margin: 0;
    }
  }

  .monitoring-overview {
    margin-bottom: 24px;
    
    .metric-card {
      border-radius: 16px;
      border: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      }
      
      &.metric-success {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
      
      &.metric-warning {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
      }
      
      &.metric-danger {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
      }
      
      :deep(.el-card__body) {
        padding: 20px;
      }
      
      .metric-content {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .metric-icon {
          margin-right: 16px;
          opacity: 0.8;
        }
        
        .metric-info {
          flex: 1;
          
          .metric-value {
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
          }
          
          .metric-title {
            font-size: 14px;
            margin-top: 4px;
            opacity: 0.9;
          }
          
          .metric-status {
            font-size: 12px;
            margin-top: 2px;
            opacity: 0.7;
          }
        }
      }
      
      .metric-progress {
        :deep(.el-progress-bar__outer) {
          background: rgba(255, 255, 255, 0.3);
        }
        
        :deep(.el-progress-bar__inner) {
          background: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .chart-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .chart-container {
      height: 300px;
      
      .chart-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #7f8c8d;
        
        .chart-icon {
          margin-bottom: 16px;
          opacity: 0.6;
        }
        
        p {
          font-size: 16px;
          margin-bottom: 20px;
        }
        
        .chart-legend {
          display: flex;
          gap: 20px;
          
          .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .legend-color {
              width: 12px;
              height: 12px;
              border-radius: 2px;
            }
          }
        }
        
        .memory-info {
          text-align: center;
          font-size: 14px;
          line-height: 1.8;
          color: #606266;
        }
      }
    }
  }

  .service-table {
    .service-name {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .service-icon {
        color: #409eff;
      }
    }
  }

  :deep(.el-card) {
    margin-bottom: 20px;
    
    .el-card__header {
      border-bottom: 1px solid #f0f2f5;
      padding: 20px 24px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: #2c3e50;
      }
    }
    
    .el-card__body {
      padding: 24px;
    }
  }
}

.mb-4 {
  margin-bottom: 24px;
}
</style>
